<template>
  <div class="user-container">
    <div class="header">
      <el-button type="primary" @click="addDialogShow = true">添加员工</el-button>
      <el-input v-model="page.name" placeholder="查询" @input="selectLike" />
    </div>
    <el-table :data="empList" border>
      <el-table-column prop="name" label="用户名" />
      <el-table-column prop="username" label="账号" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="sex" label="性别">
        <template #default="{ row }">
          {{ row.sex ? '女' : '男' }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus($event, row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="edit(row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="delEmp(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      :page-size="page.pageSize"
      layout="prev, pager, next"
      :total="page.total"
      @current-change="changePage"
    />

    <!-- 添加用户 -->
    <el-dialog v-model="addDialogShow" title="新增用户" width="50%">
      <AddEmp @closeAddDia="addDialogShow = false" />
    </el-dialog>

     <!--编辑用户 -->
     <el-dialog v-model="editDialogShow" title="修改用户" width="50%">
      <EditEmp ref='editRef' @closeEditDia="editDialogShow = false" />
    </el-dialog>
  </div>
</template>

<script setup>
import { getEmpListApi, updateEmpApi } from '@/api/index.js'
import { ref, reactive, onMounted, nextTick } from 'vue'
import { employeeStore } from '@/stores/index.js'
import { ElMessage } from 'element-plus'
import AddEmp from './addEmp.vue'
import EditEmp from './editEmp.vue'
const store = employeeStore()
onMounted(async () => {
  getEmpList()
})
//添加用户弹层显示
const addDialogShow = ref(false)
const editDialogShow = ref(false)
//员工list
const empList = ref([])
//分页参数
const page = reactive({
  page: 1,
  pageSize: 2,
  name: '',
  total: 0
})
//获取员工列表
const getEmpList = async () => {
  const res = await getEmpListApi(page)
  empList.value = res.data.list
  page.total = res.data.total
}
//分页查询
const changePage = (val) => {
  page.page = val
  getEmpList()
}

const changeStatus = async (status, row) => {
  const res = await updateEmpApi({
    id: row.id,
    status: status ? 1 : 0
  })
  // console.log(row.id)
}

//模糊查询
const selectLike = (val) => {
  getEmpList()
}

const editRef = ref()
const edit = async id => {
  editDialogShow.value = true
  nextTick(() => {
    editRef.value.getEmpDetail(id)
  })
  
}
//删除员工
const delEmp = (id) => {
  
}
</script>
